<template>
	<view>
		<navBar title="电影/影院" />
		<u-tabs name="name" :list="list" :is-scroll="false" :current="current" active-color="#FF9832"
			@change="tabsChange">
		</u-tabs>

		<!--影片列表-->
		<view v-show="current!==2" class="u-p-l-30 u-p-r-30">
			<moiveList ref="film" />
		</view>

		<!-- 影院列表 -->
		<view class="u-p-b-15" v-show="current==2">
			<cinemaList ref="cinemaList" />
		</view>
	</view>
</template>
<script>
	import navBar from '@/components/navbar/index'
	import moiveList from './components/moiveList.vue'
	import cinemaList from './components/cinemaList.vue'
	export default {
		data() {
			return {
				current: 0,
				list: [{
					name: '正在热映'
				}, {
					name: '即将上映'
				}, {
					name: '热门影院'
				}],
			}
		},
		components: {
			navBar,
			moiveList,
			cinemaList
		},
		onReachBottom() {
			if (this.current == 2) {
				this.$refs.cinemaList.page = ++this.$refs.cinemaList.page;
				this.$refs.cinemaList.getCinemaList();
			} else {
				this.$refs.film.page = ++this.$refs.film.page
				this.$refs.film.getFilmList();
			}
		},
		onPullDownRefresh() {
			if (this.current == 2) {
				this.$refs.cinemaList.page = 1;
				this.$refs.cinemaList.cinemaList = [];
				this.$refs.cinemaList.getCinemaList();
			} else {
				this.$refs.film.page = 1;
				this.$refs.film.moiveList = [];
				this.$refs.film.getFilmList();
			}
			uni.stopPullDownRefresh();
		},
		mounted() {
			this.$refs.film.type = 1;
			this.$refs.film.getFilmList();
		},
		methods: {
			tabsChange(val) {
				this.current = val;
				if (val == 2) {
					this.$refs.cinemaList.total = 0;
					this.$refs.cinemaList.page = 1;
					this.$refs.cinemaList.cinemaList = [];
					this.$refs.cinemaList.getCinemaList();
				} else {
					this.$refs.film.page = 1;
					this.$refs.film.moiveList = [];
					this.$refs.film.total = 0;
					this.$refs.film.type = val + 1;
					this.$refs.film.getFilmList();
				}
			}
		}
	}
</script>

<style scoped>
	>>>.u-mode-light-primary {
		background: linear-gradient(to right, #FF6801, #FF9832);
		border-color: #ffffff !important;
		color: #ffffff;
	}
</style>
